import React, { Component } from 'react'
import styles from "../homePage.less"
import { getSongList } from "../../../api/homePage"
import classNames from 'classnames';
import { spliceSongLit } from '../../../utils/querySearch';
import Icon from '../../../components/icon/Icon';
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
@connect(
  (state) => ({
    PayingMusic: state.PayingMusic,
    musicList: state.musicList
  }),
  dispatch => ({
    setMusic: (info) => dispatch({ type: 'platingMusic/save', payload: info })
  })
)
class RankingList extends Component {
  state = {
    songListData: {},
    rangingList: [
      {
        name: "飙升榜",
        id: "19723756",
        key: 1,
        bgc: "#d47890"
      },
      {
        name: "新歌榜",
        id: "3779629",
        key: 2,
        bgc: "#6e97b2"
      },
      {
        name: "原创榜",
        id: "2884035",
        key: 3,
        bgc: "#6ccac4"
      },
      {
        name: "热歌榜",
        id: "3778678",
        key: 4,
        bgc: "#538f94"
      },
      {
        name: "云音乐古典榜",
        id: "71384707",
        key: 5,
        bgc: "#ea9d70"
      }
    ]
  }
  componentDidMount() {
    this.getSongListData()
  }
  getSongListData = () => {
    const { rangingList, songListData } = this.state
    rangingList.forEach(item => {
      this.getInfo(item)
    })
  }
  getInfo = async (item) => {
    let res = await getSongList({ id: item.id })
    this.setState({
      songListData: {
        ...this.state.songListData,
        [item.id]: res.playlist.tracks.splice(0, 3)
      }
    })
  }
  searchKey = (key) => {
    this.props.history.push({ pathname: "/key_search_music_list", search: "?keyword=" + key })
  }
  playMusic = async (detail, e) => {
    if (e) {
      e.stopPropagation();;
    }
    let res = await getSearchKeyword({ keywords: detail.id })
    let musicInfo = res.songs[0]
    this.props.setMusic(musicInfo)
  }
  rankingListInfo = (detail) => {
    this.props.history.push({ pathname: "/music_list", search: "?id=" + detail.id })
  }
  render() {
    const { rangingList, songListData } = this.state
    return (
      <div className={styles.ranking_list}>
        <div className={styles.title}>排行榜</div>
        <div className={styles.ranking_listbox}>
          {rangingList.map(item => (
            <div key={item.id} className={styles.ranking_box} onClick={() => { this.rankingListInfo(item) }} style={{ backgroundColor: item.bgc }}>
              <div className={styles.ranking_top}>
                <div className={styles.ranking_title}>巅峰榜单</div>
                <div className={styles.ranking_name}>{item.name}</div>
              </div>
              <div className={styles.ranking_bottom}>
                {songListData[item.id] ?
                  songListData[item.id].map((music, index) => (
                    <div key={music.id} className={styles.ranking_music_box}>
                      <div className={styles.ranking_music_index}>
                        {index + 1}
                      </div>
                      <div className={styles.ranking_music_info}>
                        <div className={styles.ranking_music_name} >{music.name}</div>
                        <div className={styles.ranking_music_artists} >{
                          music.ar.map((artist, index) => (
                            <span key={index}>{artist.name} </span>
                          ))
                        }</div>
                      </div>
                    </div>
                  )) : null
                }
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }
}

export default withRouter(RankingList)
